<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Bootstrap 4 With Solarized</title>
  </head>

  <body id="home">

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="index.html">Template</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarCollapse" class="navbar-collapse collapse">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a href="#home" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="#explore-head-section" class="nav-link">Explore</a>
            </li>
            <li class="nav-item">
              <a href="#create-head-section" class="nav-link">Create</a>
            </li>
            <li class="nav-item">
              <a href="#share-head-section" class="nav-link">Share</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!--Home section-->
    <section id="home-section">
      <div class="dark-overlay">
        <div class="home-inner">
          <div class="container">
            <div class="row">
              <div class="col-lg-8 d-none d-lg-block">
                <h1 class="display-4">Build <strong>social profiles </strong> and gain
                  revenue & profits</h1>
                <div class="d-flex flex-row">
                  <div class="p-4 align-self-start">
                    <i class="fa fa-check"></i>
                  </div>
                  <div class="p-4 align-self-end">
                    Consectetur nihil voluptate at maiores reprehenderit. A dicta molestiae cupiditate reprehenderit corrupti eum Vitae possimus.
                  </div>
                </div>
                <div class="d-flex flex-row">
                  <div class="p-4 align-self-start">
                    <i class="fa fa-check"></i>
                  </div>
                  <div class="p-4 align-self-end">
                    Consectetur nihil voluptate at maiores reprehenderit. A dicta molestiae cupiditate reprehenderit corrupti eum Vitae possimus.
                  </div>
                </div>
                <div class="d-flex flex-row">
                  <div class="p-4 align-self-start">
                    <i class="fa fa-check"></i>
                  </div>
                  <div class="p-4 align-self-end">
                    Consectetur nihil voluptate at maiores reprehenderit. A dicta molestiae cupiditate reprehenderit corrupti eum Vitae possimus.
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="card text-center card-form bg-primary">
                  <div class="card-body">
                    <h3>Sign Up Today</h3>
                    <p>Please fill out this form to register</p>
                    <form>
                      <div class="form-group">
                        <input type="text" class="form-control form-control-lg " placeholder="Username"/>
                      </div>
                      <div class="form-group">
                        <input type="email" class="form-control form-control-lg " placeholder="Email"/>
                      </div>
                      <div class="form-group">
                        <input type="password" class="form-control form-control-lg " placeholder="Password"/>
                      </div>
                      <div class="form-group">
                        <input type="password" class="form-control form-control-lg " placeholder="Confirm Password"/>
                      </div>
                      <input class="btn btn-outline-light btn-block" type="submit" value="Submit">
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--Explore Head Section-->
    <section id="explore-head-section" class="bg-dark">
      <div class="container">
        <div class="row">
          <div class="col text-center">
            <div class="p-5">
              <h1 class="d-4">Explore</h1>
              <p class="lead">Ipsum laudantium est mollitia deserunt voluptas. Ducimus dolor assumenda quia quidem ad, saepe. Error magnam sed eos ipsa fuga id.</p>
              <a class="btn btn-outline-secondary" href="#">Find Out More</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--Explore section-->
    <section id="explore-section" class="bg-light text-muted pb-4 pt-2">
      <div class="container">
        <div class="row p-4">
          <div class="col-md-6">
            <img src="./img/explore-section.png" class="img-fluid mb-3 rounded-circle" alt="explore image">
          </div>
          <div class="col-md-6">
            <h3>Explore & Connect</h3>
            <p>
              Consectetur eaque exercitationem illum nesciunt odio. Quam quam ducimus inventore sequi porro est ullam, dolore, blanditiis? Error labore deleniti consequuntur reiciendis dignissimos? Impedit officiis cupiditate est id at. Laboriosam voluptate
            </p>
            <div class="d-flex flex-row">
              <div class="p-4 align-self-start">
                <i class="fa fa-check"></i>
              </div>
              <div class="p-4 align-self-end">
                Consectetur nihil voluptate at maiores reprehenderit. A dicta molestiae cupiditate reprehenderit corrupti eum Vitae possimus.
              </div>
            </div>
            <div class="d-flex flex-row">
              <div class="p-4 align-self-start">
                <i class="fa fa-check"></i>
              </div>
              <div class="p-4 align-self-end">
                Consectetur nihil voluptate at maiores reprehenderit. A dicta molestiae cupiditate reprehenderit corrupti eum Vitae possimus.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--Create Head Section-->
    <section id="create-head-section" class="bg-primary">
      <div class="container">
        <div class="row">
          <div class="col text-center">
            <div class="p-5">
              <h1 class="d-4">Create</h1>
              <p class="lead">Ipsum laudantium est mollitia deserunt voluptas. Ducimus dolor assumenda quia quidem ad, saepe. Error magnam sed eos ipsa fuga id.</p>
              <a class="btn btn-outline-light" href="#">Find Out More</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--Create section-->
    <section id="create-section" class="pt-2 pb-4">
      <div class="container">
        <div class="row p-4">
          <div class="col-md-6">
            <h3>Create Your Passion</h3>
            <p>
              Consectetur eaque exercitationem illum nesciunt odio. Quam quam ducimus inventore sequi porro est ullam, dolore, blanditiis? Error labore deleniti consequuntur reiciendis dignissimos? Impedit officiis cupiditate est id at. Laboriosam voluptate
            </p>
            <div class="d-flex flex-row">
              <div class="p-4 align-self-start">
                <i class="fa fa-check"></i>
              </div>
              <div class="p-4 align-self-end">
                Consectetur nihil voluptate at maiores reprehenderit. A dicta molestiae cupiditate reprehenderit corrupti eum Vitae possimus.
              </div>
            </div>
            <div class="d-flex flex-row">
              <div class="p-4 align-self-start">
                <i class="fa fa-check"></i>
              </div>
              <div class="p-4 align-self-end">
                Consectetur nihil voluptate at maiores reprehenderit. A dicta molestiae cupiditate reprehenderit corrupti eum Vitae possimus.
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <img src="./img/create-section.jpeg" class="img-fluid mb-3 rounded-circle" alt="explore image">
          </div>
        </div>
      </div>
    </section>

    <!--Share Head Section-->
    <section id="share-head-section" class="bg-primary">
      <div class="container">
        <div class="row">
          <div class="col text-center">
            <div class="p-5">
              <h1 class="d-4">Share</h1>
              <p class="lead">Ipsum laudantium est mollitia deserunt voluptas. Ducimus dolor assumenda quia quidem ad, saepe. Error magnam sed eos ipsa fuga id.</p>
              <a class="btn btn-outline-light" href="#">Find Out More</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--Share Section-->
    <section id="share-section" class="bg-light text-muted pt-2 pb-4">
      <div class="container p-4">
        <div class="row">
          <div class="col-md-6">
            <img src="./img/share-section.jpeg" class="img-fluid mb-3 rounded-circle" alt="explore image">
          </div>
          <div class="col-md-6">
            <h3>Share What You Create</h3>
            <p>
              Consectetur eaque exercitationem illum nesciunt odio. Quam quam ducimus inventore sequi porro est ullam, dolore, blanditiis? Error labore deleniti consequuntur reiciendis dignissimos? Impedit officiis cupiditate est id at. Laboriosam voluptate
            </p>
            <div class="d-flex flex-row">
              <div class="p-4 align-self-start">
                <i class="fa fa-check"></i>
              </div>
              <div class="p-4 align-self-end">
                Consectetur nihil voluptate at maiores reprehenderit. A dicta molestiae cupiditate reprehenderit corrupti eum Vitae possimus.
              </div>
            </div>
            <div class="d-flex flex-row">
              <div class="p-4 align-self-start">
                <i class="fa fa-check"></i>
              </div>
              <div class="p-4 align-self-end">
                Consectetur nihil voluptate at maiores reprehenderit. A dicta molestiae cupiditate reprehenderit corrupti eum Vitae possimus.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--Footer Section-->
    <footer id="main-footer" class="bg-dark">
      <div class="container">
        <div class="row">
          <div class="col text-center">
            <div class="py-4">
              <h1 class="h3">Template</h1>
              <p>Copyright &copy; 2017</p>
              <button class="btn btn-primary"
                data-toggle="modal" data-target="#contactModal">
                Contact Us</button>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <!--Contact Modal-->
    <div id="contactModal" class="modal fade text-dark">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 id="contactModalTitle" class="modal-title">
              Contact Us
            </h5>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="name">Name</label>
                <input class="form-control" type="text">
              </div>
              <div class="form-group">
                <label for="email">Email</label>
                <input class="form-control" type="email">
              </div>
              <div class="form-group">
                <label for="message">Message</label>
                <textarea class="form-control"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary btn-block">Submit</button>
          </div>
        </div>
      </div>
    </div>



    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

  </body>

</html>
